import React, { memo } from 'react'
import HNTopBanners from './c-cpns/top-banners'
import {RecommendWrap,Content,RecommendLeft,RecommendRight} from './style'
import HNHotRecommend from './c-cpns/hot-recommend'
import HNNewAlbum from './c-cpns/new-album'
import HNRanking from './c-cpns/ranking'
import HNLogin from './c-cpns/login'
import SettleSinger from './c-cpns/settle-singer'
import HotRadio from './c-cpns/hot-radio'
function HNRecommend(props) {

    return (
        <RecommendWrap>
            <HNTopBanners/>
            <Content className="wrap-v2">
                <RecommendLeft>
                    <HNHotRecommend/>
                    <HNNewAlbum/>
                    <HNRanking/>
                </RecommendLeft>

                <RecommendRight>
                    <HNLogin/>
                    <SettleSinger/>
                    <HotRadio/>
                </RecommendRight>
            </Content>
        </RecommendWrap>
    )
}

export default memo(HNRecommend);

/* function HNRecommend(props) {
    const {getBanners ,topBanners} = props;
    useEffect(() => {
        getBanners();
    }, [getBanners])
    return (
        <div>
            <h2>{topBanners.length}</h2>
        </div>
    )
}

const mapStateToProps = state =>({
    topBanners : state.recommend.topBanners
})

const mapDispachToProps = dispatch => ({
    getBanners : () => {
        dispatch(getTopBannersAction())
    }
})

export default connect(mapStateToProps,mapDispachToProps)(memo(HNRecommend)) */
